DIST.30 「一歩差がつくCSSテクニック」
https://gyazo.com/831a8332bed9d4be8fa2cd8592be5582
山本 康介
Google
紙・インク
material.io
material components for the Web
npm i @material/button
mdc-buton
mdc-button-core-styles
3行
_mixins.scss
include
mdc-button-without-ripple
.mdc-buttonが本体
includeで更に呼び出し
半径の大きさ
カラー処理
disabled
ユーザが変更できるように
アニメーション
.mdc-ripple
animation
@keyframes
直接的には実務では役に立たない
水滴
ハイライト１
border
border-radius
transform
filter
ハイライト２
border-radius
filter
ぼかし
radial-gradient
100%近くでなめらかな値になる
フチ
box-shadow
外側
内側
グラデーションとぼかしをこねくり回すといい感じに鳴る
中矢 雄介
狂気の方向に一歩に差がつく
もっと遊んでほしい
テクニック
リキッド
流体・液体表現
filter: blur() contrast()
3D
transform-style: preserve-3d
クリップスライス
clip-path: polygon
令和元年ベストのfont-familyはこれだ
font-family
-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meirio, sans-serif;
ボールド
font-weight: 600;
ウェブフォント
重い
初回アクセス時に不利
デバイスフォントで対応
長期的な不安要素を減らす対策
sans-serifは影響うける
可読性が低い
font-face問題
62以降で効かなくなった
system-uiにも注意
結局かすれる
明朝体問題
Hiragino Sansで対応
font-weight: bold; => W8があたる
Catalina Chrome 79
和文フォントにも影響あり
細く見える
細いフォントとウェイトは指定しない
継承するcolor
カスケーディング => 段階的に継承
ブラウザのユーザーエージェントスタイルは継承してくれない
ベースにcolor: inherit;
boder: 1px solid;
border-colorはcolorが継承値
fillも継承
all: unset;
もとのスタイルをリセット
継承値
レイアウトプリミティブ
テンプレートとコンポーネントをいかに堅牢にできるか
レイアウトをいかに組み立てられるか
containerというラッパーは共通化
Layouts: Every Layout
複数のレイアウトプリミティブを入れ子にできる
メディアクエリで制限しない
幅が狭いときでも横並びになる
Composition
Box
Stack
Center
CLuster
同じパターンを再利用する
ネガティブな印象なのは責務の切り分けがうまくできてない
単純な責務を与える
ウェブの本質であるアクセシビリティを守っていくのは私達の役目
focus outline
消さない
フォーカスインジケータ
キーボードだけでも操作するよおうに
Pointing Target size
タップしやすくする
震える人もいる
WCAG達成基準 2.5.5 Target Size 44×44ピクセル以上推奨
疑似要素で拡大できる
Contents Order
flexbox
order -1
コンテンツが先にくる
見出し要素より上の要素は見落としてしまう
Form Input
placeholderに値を入れるのはよくない
入力するときに見えない
支援技術側でサポートしていない
floating labels
ラベルで表示しておこう
CSSアニメーションに、なぜtransformを使ったほうが良いのか。
すぱいす
@keyframes
なめらかなアニメーション
60fpsを保ち続ける
1フレームで10msに収める
ブラウザレンダリング
JS
Style
Layout
Paint
Composite
処理がすくないほうがなめらか
margin , padding, 位置系はすべてのパイプラインを通る
transformはJS、Style, Compositeのみ
和田 武
掲載状況の最適化時に問題あるときアラートがでる
11月にサイト速度レポート
今後追加
LCP
CLS
CSSはどれほど影響あるか
シンプルな定義と10000回置き換えして定義
133 => 246
パースにかかる時間が多い
リサイクルする時間はかわらない
再レイアウトを増やすと指標は下がる
過度な継承はパフォーマンスが劣化
直接的な関係性ではなく、極端に遅いと判断されなければ良い
パフォーマンスを高めるCSS
より最適な形でCSSを扱いたい
ファイル圧縮する
最小化する
cssnano
csso
未使用スタイルを削除する
uncss
CSSファイルの参照
非同期・並列のロード
結合しなくても良いかも
@importはやらない
参照先をプリロード
rel="preload"
画像やフォントでプリロード
Webフォントのロードを最適化する
グリフ（文字データ）が多い
woff2_comprrss myfont.ttf
フォントをサブセット化する
@font-face
表示ロジック
font-display